<template>
	<view class="stored-record-pages" :style="{background:pageColor}">
		<fixed :zIndex="99">
			<view class="flex-between pd-lg fill-base">
				<view class="time-btn flex-center radius">
					<view @tap.stop="toChangeItem(index,'rankInd')" class="btn-item flex-center radius rel"
						:class="[{'cur':rankInd==index}]" v-for="(item,index) in rankList" :key="index">{{item}}
					</view>
				</view>
				<view>
					<view @tap.stop="$refs.show_choose_status.open()" class="status-btn flex-center radius"
						v-if="configInfo.plugAuth.balancediscount">
						{{typeList[typeInd]}}<i class="iconfont iconshaixuanxia-1"></i>
					</view>
				</view>
			</view>
		</fixed>
		<!-- true_type：1储值折扣卡；2余额 -->
		<view class="cate-item-area mt-md ml-lg mr-lg fill-base radius-16" @tap.stop="toChangeItem(index,'curInd')"
			v-for="(item,index) in list.data" :key="index">
			<view class="content f-title c-title pd-lg">
				<view class="flex-between">
					<view class="max-446 ellipsis">{{item.goods_title}}</view>
					<view class="c-warning">{{item.add==1?'+':'-'}}{{item.price}}</view>
				</view>
				<view class="flex-between f-caption c-caption" style="margin-top: 6rpx;">
					<view>{{item.create_time}}</view>
					<view class="flex-y-center">
						<view v-if="item.true_type==1">{{item.title | handleTitle}}</view>余额：{{item.after_balance}}
					</view>
				</view>
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1" :isCenter="true"></abnor>

		<view class="space-footer"></view>

		<uni-popup ref="show_choose_time" type="bottom" :maskClick="false">
			<view class="popup-choose-time fill-base">
				<view class="pl-lg pr-lg">
					<view class="flex-between" style="height:120rpx">
						<view class="flex-1 flex-y-baseline">
							<view class="f-paragraph c-title text-bold">自定义时间</view>
							<view class="f-paragraph ml-md" @tap.stop="toReset" style="color: #5A677E;"
								v-if="(check_time.start_time || check_time.end_time)">
								清除时间</view>
						</view>
						<i @tap.stop="toClose(1)" class="iconfont icon-close"></i>
					</view>
					<view class="flex-center pt-lg pb-lg">
						<view @tap.stop="toShowTime('start_time')" class="item-child flex-center flex-column">
							<view>开始时间</view>
							<view class="mt-sm" :style="{color:check_time.start_time ? primaryColor : '#999'}">
								{{check_time.start_time || '选择时间'}}
							</view>
						</view>
						<view @tap.stop="toShowTime('end_time')" class="item-child flex-center flex-column  b-1px-l">
							<view>结束时间</view>
							<view class="mt-sm" :style="{color:check_time.end_time ? primaryColor : '#999'}">
								{{check_time.end_time || '选择时间'}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex-center flex-column fill-body">
					<view class="space-lg"></view>
					<view @tap.stop="toConfirm" class="confirm-btn flex-center f-title c-base radius-16"
						:style="{background: primaryColor}">确定</view>
					<view class="space-lg"></view>
					<view class="space-safe"></view>
				</view>
			</view>
		</uni-popup>

		<w-picker mode="date" :startYear="startYear*1-10" :endYear="startYear" :value="toDay" :current="false"
			fields="day" @confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>

		<uni-popup ref="show_choose_status" type="bottom" :maskClick="false">
			<view class="popup-choose-time fill-base">
				<view style="padding: 0rpx 30rpx 30rpx 30rpx;">
					<view class="flex-between" style="height:120rpx">
						<view class="f-paragraph c-title text-bold">选择类型</view>
						<i @tap.stop="toClose(2)" class="iconfont icon-close"></i>
					</view>
					<view @tap.stop="toChangeItem(index,'typeInd')" class="flex-center f-mini-title pt-md pb-md"
						:class="[{'text-bold':typeInd==index}]" :style="{color:typeInd==index?primaryColor:''}"
						v-for="(item,index) in typeList" :key="index">
						{{item}}
					</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {
		},
		data() {
			return {
				toDay: '',
				startDay: '',
				startYear: '',
				showKey: '',
				showDate: false,
				rankList: ['本月', '自定义'],
				rankInd: 0,
				typeList: ['全部', '余额', '折扣卡'],
				typeInd: 0,
				prev_time: {
					start_time: '',
					end_time: ''
				},
				check_time: {
					start_time: '',
					end_time: ''
				},
				param: {
					page: 1,
					start_time: '',
					end_time: ''
				},
				list: {
					data: []
				},
				loading: true,
				curInd: -1,
				startX: 0, //开始坐标
				startY: 0, //开始坐标
				lockTap: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad() {
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				if (!refresh) {
					let cur_time = new Date(Math.ceil(new Date().getTime()))
					this.startYear = this.$util.formatTime(cur_time, 'YY')
					let toDay = this.$util.formatTime(cur_time, 'YY-M-D')
					let startDay = this.$util.formatTime(cur_time, 'YY-M') + '-01'
					this.toDay = toDay
					this.startDay = startDay
					this.check_time.start_time = startDay
					this.check_time.end_time = toDay
				}
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList(page = 0) {
				if (page) {
					this.param.page = page
				}
				let {
					list: oldList,
					typeInd
				} = this
				let param = this.$util.deepCopy(this.param)
				let {
					start_time,
					end_time
				} = this.$util.deepCopy(this.check_time)
				param.start_time = start_time && end_time ? this.$util.DateToUnix(start_time) : ''
				param.end_time = start_time && end_time ? this.$util.DateToUnix(end_time) + 24 * 3600 - 1 : ''
				let methodArr = {
					0: 'payWater',
					1: 'payWaterBalance',
					2: 'payWaterBalanceDiscount'
				}
				let methodModel = methodArr[typeInd]
				let newList = await this.$api.mine[methodModel](param)
				newList.data.map(item => {
					item.isTouchMove = false
				})
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			async toChangeItem(index, key) {
				this[key] = index
				switch (key) {
					case 'rankInd':
						let methodModel = index == 1 ? 'open' : 'close'
						this.$refs.show_choose_time[methodModel]()
						if (index == 1) return
						this.check_time.start_time = this.startDay
						this.check_time.end_time = this.toDay
						break;
					case 'typeInd':
						this.$refs.show_choose_status.close()
						break
				}
				this.getList(1)
			},
			toReset() {
				this.check_time.start_time = ''
				this.check_time.end_time = ''
			},
			async toClose(key) {
				if (key == 1) {
					let {
						month,
						start_time,
						end_time
					} = this.check_time

					if (!start_time || !end_time) {
						this.prev_time = this.$util.deepCopy(this.check_time)
					}
					if (start_time && end_time) {
						this.check_time = this.$util.deepCopy(this.prev_time)
					}
					this.$refs.show_choose_time.close()
				} else {
					this.$refs.show_choose_status.close()
				}
				this.getList(1)
			},
			toShowTime(key) {
				let {
					activeIndex
				} = this
				if (key == 'end_time' && !this.check_time.start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				let showTime = this.check_time[key]
				if (showTime) {
					this.toDay = showTime
				}
				this.showKey = key
				this.showDate = true
			},
			async onConfirm(val) {
				let {
					start_time,
					end_time
				} = this.check_time
				let {
					showKey
				} = this
				let show_unit = this.$util.DateToUnix(val.result)
				let start_unit = start_time ? this.$util.DateToUnix(start_time) : 0
				let end_unit = end_time ? this.$util.DateToUnix(end_time) : 0
				let cur_month = this.$util.formatTime(new Date(Math.ceil(new Date().getTime())), 'YY-M-D')
				let cur_unit = this.$util.DateToUnix(cur_month) + 1

				let msgType = {
					start_time: '开始时间',
					end_time: '结束时间',
				}

				if (show_unit > cur_unit) {
					this.$util.showToast({
						title: `${msgType[showKey]}不能选择未来时间哦`
					})
					return
				}

				if ((showKey == 'start_time' && end_unit && end_unit < this.$util.DateToUnix(val
						.result)) ||
					(showKey == 'end_time' && start_unit && start_unit > this.$util.DateToUnix(val.result))) {
					this.$util.showToast({
						title: `结束时间不能小于开始时间`
					})
					return
				}
				this.check_time[showKey] = val.result
			},
			async toConfirm() {
				let {
					start_time = '',
						end_time = ''
				} = this.check_time
				let start_unit = this.$util.DateToUnix(start_time) * 1000
				let end_unit = this.$util.DateToUnix(end_time) * 1000

				if (!start_time || !end_time) {
					this.$util.showToast({
						title: !start_time ? `请选择开始时间` : `请选择结束时间`
					})
					return
				}
				this.prev_time = this.$util.deepCopy(this.check_time)
				this.$refs.show_choose_time.close()
				this.getList(1)
			},
			async toDel(index) {
				let {
					id,
					title
				} = this.list.data[index]
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要删除‘${title}'`,
				})
				if (!confirm) return;
				let param = {
					id,
					status: -1
				}
				await this.$api.master.goodsCateUpdate(param)
				this.$util.showToast({
					title: `删除成功`
				})
				this.list.data.splice(index, 1)
			},
			//手指触摸动作开始 记录起点X坐标
			touchstart(e) {
				//开始触摸时 重置所有删除
				this.list.data.forEach(item => {
					if (item.isTouchMove) //只操作为true的
						item.isTouchMove = false;
				})
				this.startX = e.changedTouches[0].clientX
				this.startY = e.changedTouches[0].clientY
			},
			//滑动事件处理
			touchmove(e) {
				let {
					startX,
					startY
				} = this
				let {
					index
				} = e.currentTarget.dataset //当前索引

				let {
					clientX,
					clientY
				} = e.changedTouches[0]
				let touchMoveX = clientX
				let touchMoveY = clientY
				//获取滑动角度
				let angle = this.angle({
					X: startX,
					Y: startY
				}, {
					X: touchMoveX,
					Y: touchMoveY
				});
				this.list.data.forEach((v, i) => {
					v.isTouchMove = false
					//滑动超过30度角 return
					if (Math.abs(angle) > 30) return;
					if (i == index) {
						if (touchMoveX > startX) //右滑
							v.isTouchMove = false
						else //左滑
							v.isTouchMove = true
					}
				})
			},
			/**
			 * 计算滑动角度
			 * @param {Object} start 起点坐标
			 * @param {Object} end 终点坐标
			 */
			angle(start, end) {
				var _X = end.X - start.X,
					_Y = end.Y - start.Y
				//返回角度 /Math.atan()返回数字的反正切值
				return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
			},
		},
		filters: {
			handleTitle(val) {
				let text = val && val.length > 8 ? val.substring(0, 8) + '...' : val
				return text
			}
		}
	}
</script>


<style lang="scss">
	.time-btn {
		font-size: 25rpx;
		color: #1C1C1C;
		padding: 4rpx;
		background: #EFEFEF;

		.btn-item {
			height: 54rpx;
			padding: 0 10rpx;
			border: 1rpx solid #EFEFEF;
		}

		.btn-item.cur {
			padding: 0 20rpx;
			background: #EAF7F0;
			border-color: #44A860;
			color: #44A860;
		}
	}

	.status-btn {
		width: 166rpx;
		height: 62rpx;
		font-size: 25rpx;
		color: #1C1C1C;
		background: #EFEFEF;

		.iconfont {
			font-size: 20rpx;
			transform: scale(0.6);
			margin-left: 4rpx;
			color: #7A7A7A
		}
	}

	.popup-choose-time {
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;

		.icon-close {
			color: #A8AEB8;
			font-size: 40rpx;
		}

		.item-child {
			width: 50%;
			height: 90rpx;
		}

		.confirm-btn {
			width: 670rpx;
			height: 100rpx;
		}

	}
</style>